<template>
  <div class="content">
    <div class="title">考前冲刺</div>
    <div class="grid3">
      <div class="work flex flex-align-center flex-justify-between">
        <div class="flex flex-align-center">
          <img src="@/assets/img/gp.png" alt="" class="titlePic" />
          <div class="marL15 flex flex-column flex-justify-between">
            <div class="f20">高频100道</div>
            <!-- <div class="marT30 f15">小三门-25道</div> -->
          </div>
        </div>
        <div class="score">100道</div>
      </div>
      <div class="work flex flex-align-center flex-justify-between">
        <div class="flex flex-align-center">
          <img src="@/assets/img/yc.png" alt="" class="titlePic" />
          <div class="marL15 flex flex-column flex-justify-between">
            <div class="f20">易错一百道</div>
            <!-- <div class="marT30 f15">小三门-25道</div> -->
          </div>
        </div>
        <div class="score">100道</div>
      </div>
      <div class="work flex flex-align-center flex-justify-between">
        <div class="flex flex-align-center">
          <img src="@/assets/img/cc.png" alt="" class="titlePic" />
          <div class="marL15 flex flex-column flex-justify-between">
            <div class="f20">冲刺一百道</div>
            <!-- <div class="marT30 f15">小三门-25道</div> -->
          </div>
        </div>
        <div class="score">100道</div>
      </div>
    </div>
    <div class="title" style="margin-top: 30px">基础试题</div>
    <div class="grid3">
      <div class="work flex flex-align-center flex-justify-between">
        <div class="flex flex-align-center">
          <img src="@/assets/img/jcst1.png" alt="" class="titlePic" />
          <div class="marL15 flex flex-column flex-justify-between">
            <div class="f20">基础试题一</div>
            <!-- <div class="marT30 f15">小三门-25道</div> -->
          </div>
        </div>
        <div class="score">100道</div>
      </div>
      <div class="work flex flex-align-center flex-justify-between">
        <div class="flex flex-align-center">
          <img src="@/assets/img/jcst2.png" alt="" class="titlePic" />
          <div class="marL15 flex flex-column flex-justify-between">
            <div class="f20">基础试题二</div>
            <!-- <div class="marT30 f15">小三门-25道</div> -->
          </div>
        </div>
        <div class="score">100道</div>
      </div>
      <div class="work flex flex-align-center flex-justify-between">
        <div class="flex flex-align-center">
          <img src="@/assets/img/jcst3.png" alt="" class="titlePic" />
          <div class="marL15 flex flex-column flex-justify-between">
            <div class="f20">基础试题三</div>
            <!-- <div class="marT30 f15">小三门-25道</div> -->
          </div>
        </div>
        <div class="score">100道</div>
      </div>
      <div class="work flex flex-align-center flex-justify-between">
        <div class="flex flex-align-center">
          <img src="@/assets/img/jcst4.png" alt="" class="titlePic" />
          <div class="marL15 flex flex-column flex-justify-between">
            <div class="f20">基础试题四</div>
            <!-- <div class="marT30 f15">小三门-25道</div> -->
          </div>
        </div>
        <div class="score">100道</div>
      </div>
      <div class="work flex flex-align-center flex-justify-between">
        <div class="flex flex-align-center">
          <img src="@/assets/img/jcst5.png" alt="" class="titlePic" />
          <div class="marL15 flex flex-column flex-justify-between">
            <div class="f20">基础试题五</div>
            <!-- <div class="marT30 f15">小三门-25道</div> -->
          </div>
        </div>
        <div class="score">100道</div>
      </div>
    </div>
    <div class="title" style="margin-top: 30px">专项练习</div>
    <div class="grid3">
      <div class="work flex flex-align-center flex-justify-between">
        <div class="flex flex-align-center">
          <img src="@/assets/img/tbjq.png" alt="" class="titlePic" />
          <div class="marL15 flex flex-column flex-justify-between">
            <div class="f20">图标技巧</div>
            <!-- <div class="marT30 f15">钢琴</div> -->
          </div>
        </div>
        <div class="score">100道</div>
      </div>
      <div class="work flex flex-align-center flex-justify-between">
        <div class="flex flex-align-center">
          <img src="@/assets/img/dxt.png" alt="" class="titlePic" />
          <div class="marL15 flex flex-column flex-justify-between">
            <div class="f20">单选题</div>
            <!-- <div class="marT30 f15">视唱</div> -->
          </div>
        </div>
        <div class="score">100道</div>
      </div>
      <div class="work flex flex-align-center flex-justify-between">
        <div class="flex flex-align-center">
          <img src="@/assets/img/gp.png" alt="" class="titlePic" />
          <div class="marL15 flex flex-column flex-justify-between">
            <div class="f20">多选题</div>
            <!-- <div class="marT30 f15">练耳</div> -->
          </div>
        </div>
        <div class="score">100道</div>
      </div>
      <div class="work flex flex-align-center flex-justify-between">
        <div class="flex flex-align-center">
          <img src="@/assets/img/yc.png" alt="" class="titlePic" />
          <div class="marL15 flex flex-column flex-justify-between">
            <div class="f20">图片题</div>
            <!-- <div class="marT30 f15">乐理</div> -->
          </div>
        </div>
        <div class="score">100道</div>
      </div>
      <div class="work flex flex-align-center flex-justify-between">
        <div class="flex flex-align-center">
          <img src="@/assets/img/cc.png" alt="" class="titlePic" />
          <div class="marL15 flex flex-column flex-justify-between">
            <div class="f20">新规题</div>
            <!-- <div class="marT30 f15">自定义</div> -->
          </div>
        </div>
        <div class="score">100道</div>
      </div>
      <div class="work flex flex-align-center flex-justify-between">
        <div class="flex flex-align-center">
          <img src="@/assets/img/jcst1.png" alt="" class="titlePic" />
          <div class="marL15 flex flex-column flex-justify-between">
            <div class="f20">易错题</div>
            <!-- <div class="marT30 f15">高考真题出题分类</div> -->
          </div>
        </div>
        <div class="score">100道</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
// import { reactive, ref } from 'vue'

// const titleType = reactive([
//   {
//     name: '今日课后习题',
//     countNum: 100,
//     questionType: [{
//         pic:'/after_class.png',
//         title: '知识点练习',
//         questionNum: 25,
//     }],
//   },
// ])
</script>
<style scoped lang="scss">
// @import '@/assets/css/public.scss';

.content {
  padding: 20px;
}
.title {
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 10px;
}
.questionNum {
  font-size: 20px;
  font-weight: bold;
}
.questionUnit {
  font-size: 15px;
  margin-left: 5px;
  margin-bottom: 10px;
}
.grid3 {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 20px;
}
.work {
  padding: 30px 15px;
  border-radius: 14px;
  height: 150px;
  background-color: #fff;
  transition: all 0.3s ease; /* 添加过渡效果 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 初始阴影 */
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
}
.work:hover {
  background-color: #f0f0f0;
  transform: translateY(-10px); /* 上移10像素 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 悬停时更明显的阴影 */
}
.titlePic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.f20 {
  font-size: 20px;
}
.f15 {
  font-size: 15px;
  color: #666;
}
.score {
  font-size: 18px;
  color: #60c041;
}
</style>
